<template>
  <div class="app-container">
    <el-card>
      <div class="main-title">组织机构管理</div>
      <!-- 查询 -->
      <div class="search-card">
        <div class="search-form">
          <el-form :model="searchForm">
            <div class="search-form-item">
              <el-button type="primary" icon="el-icon-plus" size="medium" @click="btnEdit('add', -1)">新增</el-button>
            </div>
            <el-divider class="mr-20" direction="vertical" />
            <div class="search-form-item">
              <i class="el-icon-search" />
              <span>查询：</span>
            </div>
            <div class="search-form-item">
              <el-input v-model.trim="searchForm.name" size="medium" placeholder="机构名称" />
            </div>
            <div class="search-form-item">
              <el-button size="medium" type="primary" @click="search()">查询</el-button>
              <el-button size="medium" @click="resetForm">清空</el-button>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 列表区域 -->
      <el-table
        :data="tableData"
        v-loading="listLoading"
        class="table-area"
        row-key="id"
        default-expand-all
        :header-cell-style="headerCellStyle"
        :tree-props="{children: 'childList', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="机构名称"></el-table-column>
        <el-table-column prop="address" label="机构地址" />
        <el-table-column prop="primaryPerson" label="联系人" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button
              class="self-btn normal-btn"
              type="text"
              icon="el-icon-edit"
              @click="btnEdit('update', scope.row)"
            >修改</el-button>
            <el-button
              class="self-btn delete-btn"
              type="text"
              icon="el-icon-close"
              @click="deleteRow(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--<el-table
        v-loading="listLoading"
        class="table-area"
        :data="tableData"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column prop="name" label="机构名称" />
        <el-table-column prop="address" label="机构地址" />
        <el-table-column prop="connectName" label="联系人" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button
              class="self-btn normal-btn"
              type="text"
              icon="el-icon-edit"
              @click="btnEdit('update', scope.row)"
            >修改</el-button>
            <el-button
              class="self-btn delete-btn"
              type="text"
              icon="el-icon-close"
              @click="deleteRow(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>-->
      <div class="page-main">
        <el-pagination
          background
          :page-size="searchForm.pageSize"
          :current-page="searchForm.pageNo"
          :hide-on-single-page="isPagination"
          layout="total, prev, pager, next"
          :total="total"
        />
      </div>
    </el-card>
    <el-dialog :title="editTitle+'企业'" :visible.sync="dialogFormVisible"  :close-on-click-modal="false" width="30%">
      <el-form ref="form" size="medium" :rules="rules" :model="form" class="dialog-form" :label-width="formLabelWidth">
        <el-form-item label="机构名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="请填写机构名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="机构地址" prop="address">
          <el-input v-model.trim="form.address" placeholder="请填写机构地址" autocomplete="off" />
        </el-form-item>
        <el-form-item label="联系人" prop="primaryPerson">
          <el-input v-model.trim="form.primaryPerson" placeholder="请填写联系人" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model.trim="form.phone" placeholder="请填写联系方式" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="white-btn" size="small"  @click="resetInfoForm('form')">取 消</el-button>
        <el-button type="primary" class="green-btn" size="small" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getSysOfficeTree, addOffice, getSysOfficeInfobyName, updateSysOfficeInfo} from '@/api/sysSettings/company'
export default {
  name: 'Product',
  data() {
    return {
      tableData: [],
      listLoading: false,
      id: '',
      headerCellStyle() {
        return 'background-color: #f5f7fa;color: #606266'
      }, // 表格表头样式
      searchForm: {
        pageSize: 10,
        pageNo: 1,
        name: ''
      },
      editTitle: '新增',
      type: 'add',
      dialogFormVisible: false,
      total: null,
      form: {},
      formLabelWidth: '80px',
      isPagination:true,
      rules: {
        name: [
          { required: true, message: '请填写机构名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写机构地址', trigger: 'blur' }
        ],
        primaryPerson: [
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写联系方式', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    //this.tableData = compList
    this.initTable()
  },
  methods: {
    // 列表初始化
    initTable() {
      this.listLoading = true
      getSysOfficeTree().then(res => {
        if(res.stateCode === 200) {
          this.tableData = res.object.list
          if(res.total > 1) {
            this.total = res.object.total
            this.isPagination = false
          } else {
            this.isPagination = true
          }
        }
      }).catch(() => {

      }).finally(() => {
        this.listLoading = false
      })
    },
    // 查询
    search() {
      this.listLoading = true
      getSysOfficeInfobyName(this.searchForm).then(res => {
        if(res.stateCode === 200) {
          this.tableData = res.object
          this.$message({
            type: 'success',
            message: res.message,
          })
        }
      }).catch(() => {

      }).finally(() => {
        this.listLoading = false
      })
    },
    // 新增、修改
    btnEdit(type, data) {
      this.form = {
        address: data.address,
        primaryPerson: data.primaryPerson,
        name: data.name,
        phone: data.phone
      }
      this.id = ''
      this.type = type
      this.dialogFormVisible = true
      if (type === 'update') {
        this.editTitle = '修改'
        this.id = data.id
      } else if (type === 'add') {
        this.editTitle = '新增'
      }
    },
    // 新增保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.type === 'update') {
            this.form['id'] = this.id
            updateSysOfficeInfo(this.form).then(res => {
              if(res.stateCode === 200) {
                this.$message({
                  type: 'success',
                  message:res.message ,
                })
                this.dialogFormVisible = false
                this.initTable()
              }
            }).catch(() => {

            })
          } else if (this.type === 'add') {
            addOffice(this.form).then(res => {
              if(res.stateCode === 200) {
                this.$message({
                  type: 'success',
                  message:res.message ,
                })
                this.dialogFormVisible = false
                this.initTable()
              }
            })
          }
        } else {
          return false;
        }
      });
    },
    // 新增取消
    resetInfoForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisible = false
    },
    // 搜索重置
    resetForm() {
      this.searchForm = { pageNo: 1, pageSize: 10, name: '' }
      this.initTable()
    },
    // 删除
    deleteRow(val) {
      this.$confirm('确定要删除吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
            const ids = val === 'select' ? this.selectOfficeId.join(',') : val // 参数val为select时是点击'删除选择'按钮
          const param = {
              ids: ids
            }
           /* deleteOffice(param).then(response => {
              this.$message({
                type: 'success',
                message: '删除成功'
              })*/
          this.$message.success('删除成功')
        })
        .catch((action) => {})
    },
  }
}
</script>

<style lang="scss" scoped>
  @import '../../../styles/settings.scss';
.btn-group {
  padding: 16px 20px;
}
.table-area {
  padding: 0 20px;
}
.product-status {
  width: 58px;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background: #f2fff7;
  border: 1px solid #1eb955;
  color: #1eb955;
}
.product-status.active {
  background: #f3f3f3;
  border: 1px solid #999;
  color: #999;
}

// 查询区域
.search-card {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  background-color: #FFF;
  .query-text {
    width: 80px;
  }
  .search-form {
    .search-form-item {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 6px;
    }
  }
}

.item-box {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
  .detail-item {
    width: 50%;
  }
}
.tree-box {
  border: 1px solid #ebeef5;
  .tree-title {
    background-color: #f5f7fa;
    padding: 10px;
  }
}
</style>
